<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="jquery-latest.js"></script>
  <script src="jquery.dimensions.min.js"></script>
  <script src="jquery.livequery.js"></script>
  <script src="jquery.tablednd_0_5.js"></script>
  <script>
  var cnt = 0
  var itemid=0;
  var curItem = null;
  var curPropItem = null;
  $(document).ready(function(){
	$(".component").draggable({helper: 'clone'});
   $(".drop").droppable({
	accept: ".component",
	activeClass: 'droppable-active',
	hoverClass: 'droppable-hover',
	drop: function(ev, ui) {
		var control = $(ui.draggable).attr('type');

		var clonedRow = $("#maintbl tr:first").clone();
		$(clonedRow).attr('control',control);
		var itemHTML = "";
		
		if (control == "textbox"){
		itemHTML = "<input type=text >";
		}
		else if (control == "combo"){
		itemHTML = "<select></select>";
		}
		else if (control == "radio"){
		itemHTML = "<input type=radio />";
		}
		else if (control == "checkbox"){
		itemHTML = "<input type=checkbox />";
		}
		else if (control == "label"){
		itemHTML = "label text";
		}
		else if (control == "listbox"){
		itemHTML = "<select size=2></select>";
		}
		else if (control == "spacer"){
		itemHTML = "&nbsp;";
		}
		
		$(clonedRow).find('.indcomp').html(itemHTML);

		$('#maintbl').append(clonedRow);
		clonedRow.show();
		$("#maintbl").tableDnD( {onDragClass: "tblDragClass" });
		
	}
	
  });

}); 
    	
  function hey(obj){
  	alert(obj.style.right);
  }
  function removeElement(){

	$(curItem).html("");
    $(".butt").hide();
  }
  </script>
  <style>
  .tblDragClass{
	background-color:#996699;
  }
  .text{}
  .component{
  }
  .component2{
  background-color:#FFFFFF;
  }
 .drop { 
	background-color: #FFFFFF;
	border: 1px double #000000;
	width: 240px; 
	height:240px;
	margin: 10px; 
	top: 5px;
	right: 5px;
	opacity: 0.7;
	overflow:auto;
}
.droppable-active {
	opacity: 1.0;
}
.droppable-hover {
	outline: 1px dotted black;
}body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.pop{
	display:none;
}
.butt{
	position:absolute;
    display:none;
	top:10;
	left:10;
	z-index:100;
}
.propertyBox{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.item{

}
  </style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>

<span class="butt">
<table width="30" border="0" cellpadding="0" cellspacing="0"  >
<tr>
  <!--<td align="center" valign="middle"><img src="images/1.jpg" width="18" height="18" onClick="moveUp();"></td>
  <td align="center" valign="middle"><img src="images/2.JPG" width="18" height="18" onClick="moveDown();"></td> -->
  <td align="center" valign="middle"><img src="images/3.JPG" width="18" height="18" onClick="removeElement();"></td>
</tr>
</table>
</span>
<script src="ui.core.js"></script>
<script src="ui.draggable.js"></script>
<script src="ui.droppable.js"></script>
<table width="100%" border="0">
  <tr>
    <td width="30%" align="center" valign="top">
	<span class="style1">Components</span><br>
	<br/>
	<span>
	  <table width="100%" border="00" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center" valign="middle"><div><img class="component" type="textbox" src="images/text.png" ></div></td>
        </tr>
        <tr>
          <td align="center" valign="middle"><div><img class="component" type="combo" src="images/combo.png" ></div></td>
        </tr>
		 <tr>
          <td align="center" valign="middle"><div><img class="component" type="radio" src="images/radio.png" ></div></td>
        </tr>
		 <tr>
          <td align="center" valign="middle"><div><img class="component" type="checkbox" src="images/checkbox.png" ></div></td>
        </tr>
		<tr>
          <td align="center" valign="middle"><div><img class="component" type="label" src="images/label.png" ></div></td>
        </tr>
		<tr>
          <td align="center" valign="middle"><div><img class="component" type="listbox" src="images/listbox.png" ></div></td>
        </tr>
		<tr>
          <td align="center" valign="middle"><div><img class="component" type="spacer" src="images/spacer.png" ></div></td>
        </tr>
      </table>
	  <p>&nbsp;</p>
	</span>	</td>
	
    <td width="40%" align="center" valign="top">
	
	<div id="canvas" class="drop">
	  <table width="100%" cellpadding="0" cellspacing="0"  id="maintbl">
	    <tr class="item" align="left" style="display:none">
          <td width="240" class="comp" ><span  class="indcomp"></span></td>
        </tr>
      </table>
	</div>	</td>
    <td width="30%" valign="top">
	  <p class="style1"><span>Properties</span></p>
	  <div id="propBox"></div>
	 	  </td>
  </tr>
</table>
  

<script>

$(".item").livequery( "mouseover",function () {
curItem = $(this);
var pos = $(this).position();
$(".butt").css("left",pos['left'] +  $(this).width() );
$(".butt").css("top",pos['top'] );
$(".butt").show();
$(".item").css('background-color','white');
$(this).css('background-color','#F00020');
return false;
}
);

$(".item").livequery( "click",function () {

curPropItem = $(this);
$(".propertyBox").hide();
$('#propBox').html(   $("#" + $(this).attr('control') ).html() );

return false;
}
);
</script>



 <div id="textbox" class="propertyBox" style="display:none">
 		Textbox Prop
		<table width="100%" border="0">
		<tr>
		<td>Label</td>
		<td><input type="text" name="label"></td>
		</tr>
		<tr>
		<td>Value</td>
		<td><input type="text" name="value"></td>
		</tr>
	
		<td>Position</td>
		<td><input type="text" name="position"></td>
		</tr>
		</table>
		<input type="button" value="apply">
 </div>
 
  <div id="combo" class="propertyBox" style="display:none">
  		Combo Prop
		<table width="100%" border="0">
		<tr>
		<td>Label</td>
		<td><input type="text" name="label"></td>
		</tr>
		<tr>
		<td>Value</td>
		<td><input type="text" name="value"></td>
		</tr>
	
		<td>Position</td>
		<td><input type="text" name="position"></td>
		</tr>
		</table>
		<input type="button" value="apply">
 </div>
 
   <div id="radio" class="propertyBox" style="display:none">
  		Radio Prop
		<table width="100%" border="0">
		<tr>
		<td>Label</td>
		<td><input type="text" name="label"></td>
		</tr>
		<tr>
		<td>Value</td>
		<td><input type="text" name="value"></td>
		</tr>
	
		<td>Position</td>
		<td><input type="text" name="position"></td>
		</tr>
		</table>
		<input type="button" value="apply">
 </div>
  <div id="checkbox" class="propertyBox" style="display:none">
       Checkbox Prop
		<table width="100%" border="0">
		<tr>
		<td>Label</td>
		<td><input type="text" name="label"></td>
		</tr>
		<tr>
		<td>Value</td>
		<td><input type="text" name="value"></td>
		</tr>
	
		<td>Position</td>
		<td><input type="text" name="position"></td>
		</tr>
		</table>
		<input type="button" value="apply">
 </div>
  <div id="label" class="propertyBox" style="display:none">
  		Label Prop
		<table width="100%" border="0">
		<tr>
		<td>Label</td>
		<td><input type="text" name="label"></td>
		</tr>
		<tr>
		<td>Value</td>
		<td><input type="text" name="value"></td>
		</tr>
	
		<td>Position</td>
		<td><input type="text" name="position"></td>
		</tr>
		</table>
		<input type="button" value="apply">
 </div>
  <div id="listbox" class="propertyBox" style="display:none">
		List Prop
		<table width="100%" border="0">
		<tr>
		<td>Label</td>
		<td><input type="text" name="label"></td>
		</tr>
		<tr>
		<td>Value</td>
		<td><input type="text" name="value"></td>
		</tr>
	
		<td>Position</td>
		<td><input type="text" name="position"></td>
		</tr>
		</table>
		<input type="button" value="apply">
 </div>
  <div id="spacer" class="propertyBox" style="display:none">
  		Spacer Prop
		<table width="100%" border="0">
		<tr>
		<td>Label</td>
		<td><input type="text" name="label"></td>
		</tr>
		<tr>
		<td>Value</td>
		<td><input type="text" name="value"></td>
		</tr>
	
		<td>Position</td>
		<td><input type="text" name="position"></td>
		</tr>
		</table>
		<input type="button" value="apply">
 </div>
</body>
</html>